<template>
  <page-content :left="true">
    <lz-form
      ref="form"
      :get-data="getData"
      :submit="onSubmit"
      :errors.sync="errors"
      :form.sync="form"
      :inDialog="false"
    >
      <lz-form-item 
        label="用户名" 
        required 
        prop="username"
      >
        <a-input v-model="form.username"/>
      </lz-form-item>
      <lz-form-item 
        label="姓名" 
        required 
        prop="name"
      >
        <a-input v-model="form.name"/>
      </lz-form-item>
      <lz-form-item 
        label="头像" 
        prop="avatar"
      >
        <file-picker v-model="form.avatar" ext="jpg,gif,png,jpeg"/>
      </lz-form-item>
      <lz-form-item 
        label="密码" 
        required-when-create 
        prop="password"
      >
        <a-input v-model="form.password" type="password"/>
      </lz-form-item>
      <lz-form-item 
        label="确认密码" 
        required-when-create 
        prop="password_confirmation"
      >
        <a-input v-model="form.password_confirmation" type="password"/>
      </lz-form-item>
      <lz-form-item 
        label="角色" 
        prop="roles"
      >
        <a-select
          v-model="form.roles"
          mode="multiple"
          option-filter-prop="name"
          show-arrow
          allow-clear
        >
          <a-select-option
            v-for="i of roles"
            :key="i.id"
            :name="i.name"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </lz-form-item>
      <lz-form-item 
        label="权限" 
        prop="permissions"
      >
        <lz-transfer
          :show-sort="false"
          :data-source="perms"
          v-model="form.permissions"
        />
      </lz-form-item>
    </lz-form>
    <div>
      <a-anchor
        :affix="true"
        :get-current-anchor="getCurrentAnchor"
        :target-offset="targetOffset"
      >
        <template  v-if="edit" v-for="j of configs">
          <a-anchor-link 
            v-for="i of j.list"
            :title="i.name" 
            :href="`#/admin-permissions/`+$route.params.id+`/edit${$route.hash && $route.hash.includes(i.slug) ? $route.hash : '#'+i.slug}`" 
          />
        </template>
        <template  v-else v-for="j of configs">
          <a-anchor-link 
            v-for="i of j.list"
            :title="i.name" 
            :href="`#/admin-permissions/create${$route.hash && $route.hash.includes(i.slug) ? $route.hash : '#'+i.slug}`" 
          />
        </template>
      </a-anchor>
    </div>
  </page-content>
</template>

<script>
import LzForm from '@c/LzForm'
import LzFormItem from '@c/LzForm/LzFormItem'
import PageContent from '@c/PageContent'
import FilePicker from '@c/LzForm/FilePicker'
import LzTransfer from '@c/LzForm/LzTransfer'
import { mapConstants } from '@/libs/constants'
import {
  createAdminUser,
  editAdminUser,
  storeAdminUser,
  updateAdminUser,
} from '@/api/admin-users'

export default {
  name: 'Form',
  components: {
    FilePicker,
    PageContent,
    LzForm,
    LzFormItem,
    LzTransfer,
  },
  data() {
    return {
      form: {
        username: '',
        name: '',
        password: '',
        password_confirmation: '',
        roles: [],
        permissions: [],
        avatar: '',
      },
      edit: false,
      errors: {},
      roles: [],
      perms: [],
      configs: [
        {
          group: null,
          list: [
            {
              name: "用户名",
              slug: "username",
            },
            {
              name: "姓名",
              slug: "name",
            },
            {
              name: "头像",
              slug: "avatar",
            },
            {
              name: "密码",
              slug: "password",
            },
            {
              name: "确认密码",
              slug: "password_confirmation",
            },
            {
              name: "角色",
              slug: "roles",
            },
            {
              name: "权限",
              slug: "permissions",
            },
          ]
        }
      ],
      targetOffset: undefined,
    }
  },
  mounted() {
    this.targetOffset = window.innerHeight / 2;
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
  },
  methods: {
    async getData($form) {
      let data
      if ($form.realEditMode) {
        ({ data } = await editAdminUser($form.resourceId))
        
        data.data.permissions = data.data.permissions.map(i => i.id)
        this.edit = true
      } else {
        ({ data } = await createAdminUser())
        data.data.permissions = data.data.permissions.map(i => i.id)
      }
      this.roles = data.roles
      this.perms = data.permissions.map((i) => ({ key: i.id.toString(), title: i.name }))
      return data.data
    },
    async onSubmit($form) {
      if ($form.realEditMode) {
        await updateAdminUser($form.resourceId, this.form)
      } else {
        await storeAdminUser(this.form)
      }
    },
    getCurrentAnchor() {
      if (this.edit) {
        return '#/admin-users/create'+this.$route.hash;
      } else {
        return '#/admin-users/'+this.$route.params.id+'/edit'+this.$route.hash
      }
    },
  },
}
</script>
<style>
.ant-anchor-wrapper {
  margin-left: 30px;
}
</style>
